import React from 'react'
import { Table } from 'semantic-ui-react'
import moment from 'moment'
import 'moment/locale/zh-cn'
import ReactLoading from 'react-loading'
import Styled from 'styled-components'

const Loading = Styled(ReactLoading)`
  margin-right:1em;
  display:inline-table;
`
const Text = Styled.div`
  display:inline;
  vertical-align: super;
`

moment.locale('zh-cn')

export default ({ children }) => (
  <Table.Cell verticalAlign="middle">
    <Loading color="#21ba45" height={30} width={25} type="bars" />
    <Text>{children}</Text>
  </Table.Cell>
)
